<template>
  <div style="position: relative;">
    <div style="padding:10px;">
      <div style="font-size:14px;">{{perInfo.nickname}}，{{perInfo.mobile}}</div>
      <div style="font-size:14px;padding-top: 4px;">{{perInfo.desc}}</div>
      <div style="display:flex;justify-content: flex-start;padding-top: 4px;">
        <div v-for="img of perInfo.images">
          <img :src="img" style="width:90px;height:90px;margin: 5px;">
        </div>
      </div>


      <div style="display:flex;padding-top:10px;align-items: center;">
        <div style="flex:3">
          <img @click="goTo()" src="../assets/thumb_d_g.png" style="width:24px;height:25px;padding-right: 8px;">
          <img @click="goTo()" src="../assets/thumb_g.png" style="width:24px;height:22px;padding-right: 8px;">
          <img @click="goTo()" src="../assets/content.png" style="width:24px;height:22px;padding-right: 8px;">
        </div>
        <div @click="goTo()" style="display:flex;flex:2;justify-content: flex-end;align-items: center;">
          <div class="f12" style="padding-right: 4px;">分享</div>
          <img src="../assets/share.png" style="width:24px;height:24px;">
        </div>
      </div>
      <div class="f12" style="padding-top: 4px;">评价来自：{{perInfo.name}}</div>

      <div style="display:flex;padding-top:10px;align-items:center;">
        <div class="f12">{{perInfo.praise}}赞成</div>
        <div style="display:flex;height:6px;flex:4;padding: 0 10px;">
          <div style="background-color:#666;border-top-left-radius:5px;border-bottom-left-radius:5px;"
               :style="{'flex':perInfo.praise}"></div>
          <div style="background-color:#999;border-top-right-radius:5px;border-bottom-right-radius:5px;"
               :style="{'flex':perInfo.refuse}"></div>
        </div>
        <div class="f12">{{perInfo.refuse}}反对</div>
      </div>

      <div class="f12" style="padding-top:10px;">{{perInfo.comment}}条评论</div>

      <div class="f12" style="padding-top:10px;">以上内容来自“铜镜”用户，不代表本平台观点和立场，如您对评价内容真实性有异议，请联系我们。</div>
    </div>
    <div style="position: fixed;width: 100%;height: 60px;background-color: #7C7C7C;bottom: 0;opacity: 0.6;"></div>
    <div
      style="color: #ffffff;height: 30px;position:fixed;bottom:15px;width: 100%;">
      <div style="display: flex;">
        <img src="../assets/logo_circle.png" style="width: 36px;height: 36px;padding-left: 10px;padding-right: 4px;">
        <div style="">
          <div style="font-size: 12px;">铜镜</div>
          <div style="font-size: 12px;">让渣男渣女无处藏身</div>
        </div>
        <div @click="goTo()"
             style="display: flex;flex: 2;justify-content: flex-end;text-align: center;margin-right: 10px;">
          <div
            style="width: 80px;height: 30px;color: #000;background-color: #fff;line-height: 30px;font-size: 14px;border-radius: 6px;">
            下载app
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import qs from 'qs'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        perInfo: {}
      }
    },
    created: function () {

    },
    mounted: function () {
      let that = this
      //http://www.autochat.cc/uid/3191
      axios.post('http://compare.autochat.cc/index/Share/index/id/' + that.$route.params.uid, {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function (response) {
        console.log('response.data ', response)
        if (response.data.errno === 0 && response.data) {
          that.perInfo = response.data.data;
          console.log('response.data ', response.data.data)
          that.headInit(that.perInfo)
        } else {
          alert(response.data.errmsg)
        }
      }).catch(function (error) {
        that.$router.push({name: 'notFound'})
        // 发生错误

      });
    },
    methods: {
      goTo: function () {
        this.openApp("compareapp://?", function (data) {
          //打不开
          if (!data) {
            window.location.href = "http://android.myapp.com/myapp/detail.htm?apkName=cc.autochat.compare"
          }
        })
        //window.location.href = "http://android.myapp.com/myapp/detail.htm?apkName=cn.aliao.autochat";
      },
      headInit: function (perInfo) {
        //icon
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
        link.type = 'image/x-icon'
        link.rel = 'shortcut icon'
        link.href = perInfo.avatar
        document.getElementsByTagName('head')[0].appendChild(link)
        //description
        var metaTag = document.createElement('meta');
        metaTag.name = 'description';
        metaTag.content = perInfo['desc'];
        document.getElementsByTagName('head')[0].appendChild(metaTag)
        //title
        document.title = perInfo.nickname + perInfo.mobile
      },
      openApp: function (openUrl, callback) {
        console.log('openUrl ', openUrl)

        //检查app是否打开
        function checkOpen(cb) {
          var _clickTime = +(new Date())

          function check(elsTime) {
            if (elsTime > 3000 || document.hidden || document.webkitHidden) {
              cb(1)
            } else {
              cb(0)
            }
          }

          //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
          var _count = 0, intHandle;
          intHandle = setInterval(function () {
            _count++
            var elsTime = +(new Date()) - _clickTime;
            if (_count >= 100 || elsTime > 3000) {
              clearInterval(intHandle)
              check(elsTime)
            }
          }, 20)
        }

        //在iframe 中打开APP
        var ifr = document.createElement('iframe')
        ifr.src = openUrl
        ifr.style.display = 'none'

        if (callback) {
          //客户端检测微信直接跳应用宝链接
          var browser = this.BrowserInfo()
          //使用微链接
          var encodeUri = encodeURIComponent(openUrl)

          if (browser.isWeixin) {
            alert('请点击右上角用浏览器打开')
            //window.location.href = 'http://android.myapp.com/myapp/detail.htm?apkName=cn.aliao.autochat&android_schema=' + encodeUri;
          } else {
            checkOpen(function (opened) {
              callback && callback(opened)
            });

          }
        }

        document.body.appendChild(ifr)
        setTimeout(function () {
          document.body.removeChild(ifr)
        }, 2000)

      },
      BrowserInfo: function () {
        var json = {
          userAgent: navigator.userAgent.toLowerCase(),
          isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
          isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
          isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
          isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
        }

        return json;
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    /*margin: 0 10px;*/
  }

  a {
    color: #42b983;
  }

  .swiper-container {
    width: 100%;
    height: 320px;
  }

  .f12 {
    font-size: 12px;
    color: #AAAAAA;
  }
</style>
